<template>
  <view class="overflow-hidden relative flex-col page-container">
    <!-- 主要内容区域 -->
    <view class="main-content flex-col flex-x-center-y-center p-40">
      <!-- 状态栏占位符 -->
      <view class="status-bar" />
      <!-- 醒目的模板名称 -->
      <view class="template-title-container">
        <text class="template-name inline-block gradient-text">uni-app 开发模板</text>
        <view class="title-underline" />
      </view>

      <!-- 项目描述卡片 -->
      <view class="description-card p-40">
        <view class="card-text">
          <text class="desc-title block">Vue2 uni-app 开发模板</text>
          <text class="desc-content block truncate-2">
            基于 Vue2 + JavaScript 的 uni-app 开发模板，集成 Vuex 状态管理、Lodash-es
            工具库，提供基础的项目结构和常用功能示例，帮助开发者快速上手 uni-app 开发。
          </text>
        </view>
      </view>

      <!-- 版本号信息 -->
      <view class="version-tip">
        <text>版本 v1.0.0</text>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="footer-decoration">
      <view class="deco-shape-1" />
      <view class="deco-shape-2" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      // 可以在这里添加数据
    }
  },
  methods: {
    // 可以在这里添加方法
  },
}
</script>

<style lang="scss">
.page-container {
  color: #fff;
  background-color: #000;

  // 青色光晕 (左上角)
  &::before {
    position: absolute;
    top: -300rpx;
    left: -300rpx;
    z-index: 0;
    width: 1000rpx;
    height: 1000rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgba(0, 220, 255, 0.1) 0%, transparent 70%);
    filter: blur(120rpx);
  }

  // 品红色光晕 (右下角)
  &::after {
    position: absolute;
    right: -400rpx;
    bottom: -400rpx;
    z-index: 0;
    width: 1200rpx;
    height: 1200rpx;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle, rgba(255, 42, 109, 0.08) 0%, transparent 70%);
    filter: blur(140rpx);
  }
}

.main-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  text-align: center;

  .template-title-container {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 760rpx;
    margin-bottom: 70rpx;

    .template-name {
      margin-bottom: 20rpx;
      font-size: 112rpx;
      font-weight: bold;
      letter-spacing: 4rpx;

      &.gradient-text {
        background: linear-gradient(90deg, #00f2ea, #ff2a6d);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .title-underline {
      width: 160rpx;
      height: 8rpx;
      margin: 20rpx auto 0;
      background: linear-gradient(90deg, #00f2ea, #ff2a6d);
      border-radius: 4rpx;
      box-shadow: 0 0 16rpx rgba(0, 242, 234, 0.4), 0 0 16rpx rgba(255, 42, 109, 0.4);
    }
  }

  .description-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 760rpx;
    margin-bottom: 80rpx;
    background-color: rgba(25, 25, 25, 0.7);
    border: 2rpx solid rgba(255, 255, 255, 0.08);
    border-radius: 24rpx;
    box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);

    .card-text {
      flex: 1;

      .desc-title {
        margin-bottom: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #bbb;
      }

      .desc-content {
        font-size: 28rpx;
        line-height: 1.6;
        color: #ddd;
      }
    }
  }

  .version-tip {
    padding-bottom: 0;
    margin-top: auto;
    margin-bottom: -40rpx;
    font-size: 24rpx;
    color: #555;
  }
}

.footer-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 400rpx;
  overflow: hidden;
  pointer-events: none;

  .deco-shape-1 {
    position: absolute;
    bottom: -300rpx;
    left: -240rpx;
    width: 800rpx;
    height: 800rpx;
    background: radial-gradient(circle, rgba(0, 220, 255, 0.12) 0%, transparent 65%);
    filter: blur(80rpx);
    border-radius: 50%;
  }

  .deco-shape-2 {
    position: absolute;
    right: -300rpx;
    bottom: -360rpx;
    width: 900rpx;
    height: 900rpx;
    background: radial-gradient(circle, rgba(255, 42, 109, 0.1) 0%, transparent 65%);
    filter: blur(90rpx);
    border-radius: 50%;
  }
}
</style>
